<template>
  <div class="contaienr-item-list-user">
    <el-table border :data="list" size="mini" :lazy="true">
      <el-table-column label="用户id" prop="id" width="60" />
      <el-table-column label="头像" width="60" align="center">
        <template slot-scope="{row}">
          <!-- <el-image style="width:30px;height:30px;border-radius: 50%" :src="row.avatar" fit="cover" /> -->
          <userAvatar style="width:30px;height:30px;border-radius: 50%" :uid="row.id" :src="row.avatar" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="nickname" />
      <el-table-column label="注册时间" width="150" align="center">
        <template slot-scope="props">
          <span class="el-icon-date"> {{ new Date(props.row.created_at) | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="185" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="danger" icon="el-icon-turn-off-microphone">禁闭</el-button>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="checkDetail(row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        const arr = [];
        return arr;
      }
    }
  },
  methods: {
    checkDetail(id) {
      this.$emit('detail', id);
    }
  }
};
</script>
